import React, { memo } from "react";

// shallowEqual浅比较
import { useDispatch, shallowEqual, useSelector } from "react-redux"
import classNames from "classnames"
import { GHAppAtrisiCegetory } from './style'

import { artistCategories } from '@/services/local-data';
import { changeCurrentAreaAction, changeCurrentTypeAction } from '../../store/actionCreators'

import { CategoryWrapper, CategoryItem } from './style';

export default memo(function GHAtristCegetory(props) {

  const { currentArea, currentType } = useSelector((state) => {
    return {
      currentArea: state.getIn(['artist', 'currentArea']),
      currentType: state.getIn(['artist', 'currentType'])
    }
  }, shallowEqual)
  const dispatch = useDispatch()

  const seletArtist = (area, type) => {
    dispatch(changeCurrentAreaAction(area))
    dispatch(changeCurrentTypeAction(type))
  }

  const renderArtist = (artists, area) => {
    return (
      <div>
        {
          artists.map((item, index) => {
            const isSelect = currentArea === area && currentType.type === item.type
            return (
              <CategoryItem key={item.name}
                className={classNames({ "active": isSelect })}>
                <span onClick={e => seletArtist(area, item)}>{item.name}</span>
              </CategoryItem>
            )
          })
        }
      </div>
    )
  }
  return (
    <CategoryWrapper>
      {
        artistCategories.map((item, index) => {
          return (
            <div className="section" key={item.area}>
              <h2 className="title">{item.title}</h2>
              {renderArtist(item.artists, item.area)}
            </div>
          )
        })
      }
    </CategoryWrapper>
  )
})